<!-- Dom模板 -->
<template>
    
  <div class="xiugai">
        <!-- Dom内容 -->
        
    <div class="xiugaibox">
      <div class="xiugai_head">
        <p class="iconfont icon-iconfontyoujiantou-zuo" @click="closes"></p>
        <h3>修改密码</h3>
      </div>
      <div class="eidpass">
        <!-- 原密码 -->
        <input
          type="password"
          placeholder="填写原密码"
          v-model="oldpass"
          ref="passxianshi"
          v-show="passxianshi"
          class="passxianshi"
        />
        <input
          type="text"
          placeholder="填写原密码"
          v-model="oldpass"
          ref="passguanbi"
          class="passguanbi"
        />
        <!-- 眼 -->
        <div class="yi">
          <span class="iconfont icon-yanjing1" @click="xianshi" ref="yan"></span>
        </div>
        <!-- 弹窗 -->
        <div class="alert">
          <p ref="nonullf">不能为空</p>
          <p ref="oldpass">原密码不正确</p>
        </div>
        <!-- 新密码 -->
        <input
          type="password"
          placeholder="填写新密码"
          v-model="pass"
          ref="passxianshinew"
          v-show="passxianshinew"
          class="passxianshinew"
        />
        <input
          type="text"
          placeholder="填写新密码"
          v-model="pass"
          ref="passguanbinew"
          class="passguanbinew"
        />
        <!-- 眼 -->
        <div class="er">
          <span
            class="iconfont icon-yanjing1"
            @click="xianshi1"
            ref="yan1"
          ></span>
        </div>
        <!-- 弹窗 -->
        <div class="alert">
          <p ref="nonulls">不能为空</p>
          <p ref="newoldpass">新密码不能与原密码一致</p>
        </div>
        <!-- 再次输入新密码 -->

        <input
          type="password"
          placeholder="再次填写确认"
          v-model="aginpass"
          ref="passxianshia"
          v-show="passxianshia"
          class="passxianshia"
        />
        <input
          type="text"
          placeholder="再次填写确认"
          v-model="aginpass"
          ref="passguanbia"
          class="passguanbia"
        />
        <!-- 眼 -->
        <div class="san">
          <span
            class="iconfont icon-yanjing1"
            @click="xianshi2"
            ref="yan2"
          ></span>
        </div>
        <!-- 弹窗 -->
        <div class="alert">
          <p ref="nonullt">不能为空</p>
          <p ref="pass">两次填写的密码不一致</p>
        </div>
      </div>
      <p>*密码必须是8-16位的数字，字母组合(不能是纯数字，不可以有特殊字符)*</p>
      <button class="btn" @click="xiugai">提交</button>
    </div>

      <Yescheck v-if="alertFlags" ref="yescheck" @close="close" :type="type" />
    <!-- 组件 -->
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
import Yescheck from "../../components/ok/index.vue";
export default {
  components: {
    Yescheck,
  },
  data() {
    return {
      msg: "测试",
      oldpass: "",
      pass: "",
      aginpass: "",
      alertFlags: false,
      type: "",
      passxianshi: true,
      passxianshinew: true,
      passxianshia: true,
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义   12345678q
  methods: {
    xianshi() {
      if (this.passxianshi) {
        this.passxianshi = false;
        this.$refs.yan.classList = "iconfont icon-yanjing";
        this.$refs.passxianshi.style.display = "none";
        this.$refs.passguanbi.style.display = "block";
      } else if (!this.passxianshi) {
        this.passxianshi = true;
        this.$refs.yan.classList = "iconfont icon-yanjing1";
        this.$refs.passxianshi.style.display = "block";
        this.$refs.passguanbi.style.display = "none";
      }
    },
    xianshi1() {
      if (this.passxianshinew) {
        this.passxianshinew = false;
        this.$refs.yan1.classList = "iconfont icon-yanjing";
        this.$refs.passxianshinew.style.display = "none";
        this.$refs.passguanbinew.style.display = "block";
      } else if (!this.passxianshinew) {
        this.passxianshinew = true;
        this.$refs.yan1.classList = "iconfont icon-yanjing1";
        this.$refs.passxianshinew.style.display = "block";
        this.$refs.passguanbinew.style.display = "none";
      }
    },
    xianshi2() {
      if (this.passxianshia) {
        this.passxianshia = false;
        this.$refs.yan2.classList = "iconfont icon-yanjing";
        this.$refs.passxianshia.style.display = "none";
        this.$refs.passguanbia.style.display = "block";
      } else if (!this.passxianshia) {
        this.passxianshia = true;
        this.$refs.yan2.classList = "iconfont icon-yanjing1";
        this.$refs.passxianshia.style.display = "block";
        this.$refs.passguanbia.style.display = "none";
      }
    },
    xiugai() {
      let reg = /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,16}$/;
      let str = this.pass;
      let resu = reg.exec(str);
      let oldpass = this.$store.state.login.loginuser.password;
      // 输入密码不能为空
      if (!this.oldpass) {
        this.$refs.nonullf.style.display = "block";
        // 原密码不正确
      } else if (String(this.oldpass) !== String(oldpass)) {
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "block";
        // 输入密码不能为空
      } else if (!this.pass) {
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "block";
        // 新密码与原密码不能一致
      } else if (this.pass === String(this.oldpass)) {
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.newoldpass.style.display = "block";
      } else if (resu === null) {
        // 密码校验规则
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.newoldpass.style.display = "none";
        setTimeout(() => {
          Toast.fail("密码格式不正确");
        }, 500);
      } else if (!this.aginpass) {
        // 再次输入密码不能为空
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.newoldpass.style.display = "none";
        this.$refs.nonullt.style.display = "block";
        // 两次密码不一致
      } else if (this.pass !== this.aginpass) {
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.newoldpass.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        this.$refs.pass.style.display = "block";
        // 所有判断完成，向后台发送数据
      } else {
        this.$refs.nonullf.style.display = "none";
        this.$refs.oldpass.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.newoldpass.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        this.$refs.pass.style.display = "none";
        this.alertFlags = true;
        this.type = "正在修改";
        let id = sessionStorage.getItem("userId");
        this.$store
          .dispatch("login/eidt", {
            userid: id,
            type: "password",
            password: this.pass,
          })
          .then((res) => {
            if (res.code === 200) {
              let obj = {
                codeState: res.msg,
                states: true,
              };
              let time = setTimeout(() => {
                this.$store.commit("my/setChangeState", obj);
              }, 1000);
              this.$store.state.login.loginuser.password = this.pass;
            }
          });
      }
    },
    closes() {
      this.$parent.back();
    },
    close(res) {
      this.alertFlags = res;
      this.$store.commit("my/setChangeState", false);
      this.$parent.back();
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");

/* .icon-iconfontyoujiantou-zuo{
  padding: 0.266667rem;
} */
.passguanbi {
  display: none;
}
.passguanbinew {
  display: none;
}
.passguanbia {
  display: none;
}
.yi {
  position: absolute;
  right: 0.106667rem;
  top: 0.266667rem;
}
.er {
  position: absolute;
  right: 0.106667rem;
  top: 2.133333rem;
}
.san {
  position: absolute;
  right: 0.106667rem;
  top: 4rem;
}

.xiugai {
  width: 100vw;
  height: 100vh;
  background: white;
}
.xiugaibox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.02);
}
.xiugai_head {
  width: 100%;
  height: 1.466667rem;
  background: #f33a65;
  color: white;
  padding-top: 0.4rem;
  margin-bottom: 50px;
}
.xiugai_head p {
  width: 0.533333rem;
  font-size: 0.746667rem;
  float: left;
}
.xiugai_head h3 {
  width: calc(100vw - 1.626667rem);
  font-size: 0.586667rem;
  line-height: 0.826667rem;
  float: left;
  text-align: center;
}
.btn {
  width: 80%;
  height: 1.173333rem;
  display: block;
  margin: 0.8rem auto;
  background: #f33a65;
  border: none;
  outline: none;
  color: white;
  border-radius: 0.586667rem;
}
.alert {
  width: 100%;
  height: 0.853333rem;
}
.alert p {
  color: #f33a65;
  font-style: italic;
  display: none;
}
.eidpass {
  width: 75%;
  margin: 0 auto;
  position: relative;
}
.eidpass input {
  width: 100%;
  height: 1rem;
  border: none;
  outline: none;
  border-bottom: 1px solid #cfcfcf;
  background: #fafafa;
  color: #b2b0b0;
}
.xiugaibox > p:last-of-type {
  width: 75%;
  margin: 0 auto;
}
</style>